<template>
    <div>
  <header>
    <div class="banxin tanxin">
        <div class="left">欢迎来到叩丁狼积分商城</div>
        <ul class="right" v-if="userInfo">
            <li><img :src="userInfo.headImg||require('@/assets/images/userImg.png')" class="avatar"><span class="nickname">用户名：{{ userInfo.nickName}} </span></li>
            <li>我的积分：{{userInfo.coin}}</li>
            <li>获取积分</li>
            <li>扣丁狼官网</li>
            <li style="cursor:pointer" @click="exit">退出登录</li>
            <li><img src="@/assets/images/Shopping.png"><span>购物车</span><i>{{ userInfo.staff||0}}</i></li>
        </ul>
        <ul class="right" v-else>
            <li><img :src="require('@/assets/images/userImg.png')" class="avatar"><span class="nickname">用户名：游客 </span></li>
            <li>我的积分：--</li>
            <li>获取积分</li>
            <li>扣丁狼官网</li>
            <li @click="login">登录</li>
        </ul>
    </div>
    
  </header>
  <nav class="tanxin banxin">
        <img src="@/assets/images/indexLogo.png" class="logo">
        <ul class="navbar">
            <router-link :class="{on:$route.path=='/'}" to="/" role="li" >首页</router-link>
            <router-link :class="{on:$route.path=='/products'}" to="/products" role="li">全部商品</router-link>
            <router-link :class="{on:$route.path=='/user'}" to="/user" role="li">个人中心</router-link>
            <router-link :class="{on:$route.path=='/'}" to="/" role="li">我的订单</router-link>
            <router-link :class="{on:$route.path=='/'}" to="/" role="li">专属福利</router-link>
        </ul>
        <div class="search">
            <input type="text" placeholder="请输入关键字" v-model.trim="searchipt"/><button @click="search"></button>
        </div>
    </nav>
    <Notice :msgStatus="msgStatus"></Notice>
</div>
</template>

<script>
import qs from 'qs'
export default {
    data(){
        return{
            navbar:"one",
            msgStatus:{},
            searchipt:"",
        }
    },
    computed:{
        userInfo(){
            return this.$store.state.user;
        }
    },
    methods:{
        login(){
            this.$store.commit('changeOpenLogin',true);
        },
        changenav(index){
            this.navbar = index;
        },
        exit(){
            localStorage.removeItem("x-auth-token");
            this.$store.commit("changeUser",null);
        },
        search(){
            if(!this.searchipt) return;
            this.$router.push({path:"/products",query:{keyword:this.searchipt}});
        }
    },
    created(){
        let _this = this;
        if(localStorage.getItem("x-auth-token") && this.userInfo){
            this.$ajax.get("/shop/userProfiles").then(res=>{
                this.$store.commit("changeUser",res.data.userInfo)
            })
        }
        else if(_this.$route.query.code){
            console.log(_this.$route.query.code);
            this.$ajax.post("/wechatUsers/PCLogin",qs.stringify({
                code:_this.$route.query.code,
            })).then(res=>{
                //407绑定手机
                if(res.code===407){
                  sessionStorage.setItem("uuid",res.uuid);
                  this.msgStatus = {
                        info:"warning", 
                        message:res.message,
                        isshow:true,
                    }
                  this.$store.commit("changeOpenLogin",true)
                }
                else if(res.code === 0){
                    this.msgStatus = {
                        info:"success", 
                        message:res.message,
                        isshow:true,
                    }
                    localStorage.setItem("x-auth-token",res["x-auth-token"]);
                }else{
                    this.msgStatus  = {
                        info:"error",
                        message:res.message,
                        isshow:true,
                    }
                }
                
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import '@/assets/css/base.less';
header{
    width: 100%;
    background-color: #242B39;
    height: 40px;
    .left{
        height: 15px;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
    }
    .right{
        display: flex;
        color:#fff;
        font-size: 14px;
        justify-content: space-around;
        flex-wrap: nowrap;
        line-height: 40px;
        
        li{
            padding:0 12px;
            height: 40px;
            img{
                width:26px;
                height: 26px;
                display: inline-block;
                vertical-align:middle;
            }
            .nickname{
                padding-left: 5px;
            }
            .avatar{
                border-radius: 13px;
                
            }
            &:last-child{
                width: 124px;
                background-color: #0A328E;
                span{
                    padding: 0 10px;
                }
                i{
                    display: inline-block;
                    width: 22px;
                    height: 22px;
                    background-color: #FD604D;
                    border-radius: 11px;
                    line-height: 22px;
                }
            }
        }
    }
    
}
nav{
        padding-top: 30px;
        align-items: center;
        .logo{
            width: 257px;
        }
        .navbar{
            width: 500px;
            display:flex;
            justify-content: space-between;
            list-style: none;
            color: #242B39;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            .on{
                color: #0A328E;
            }
        }
        
        .search{
            width: 264px;
            display: flex;
            input{
                width: 214px;
                height: 40px;
                outline-style: none;
                line-height: 40px;
                border: 1px solid #DEDEDE;
                border-radius: 20px 0 0 20px;
                padding: 0 10px;
                box-sizing: border-box;
            }
            button{
                width: 50px;
                height: 40px;
                background: url("@/assets/images/search.png") no-repeat center #0A328E;
                border: 1px solid #DEDEDE;
                border-radius: 0 20px 20px 0;
                border-left: 0;
                line-height: 40px;
                
            }
        }
        
    }

</style>